<script lang="ts" setup>
import { Ref, onMounted, ref } from 'vue';
import { TipsQuery, TipsWxVo, getTips } from '../../api/tips';
import { baseUrl } from '../../api/http';
import { goTipsDe, goIndex} from "../../util/go.ts"
import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
	

const query:Ref<TipsQuery> = ref({
	pageNum: 1,
	pageSize: 10,
	title: ""
})

const data:Ref<TipsWxVo[]> = ref([
	
])
	
const getList = () => {
	getTips(query.value).then(res => {
		// data.value.push(...res.data.data.data.records)
		const d = res.data.data.data.records as TipsWxVo[]
		for (let i = 0; i < d.length; i++) {
			data.value.push({
				id: d[i].id,
				file: d[i].file,
				title: d[i].title,
				content: d[i].content,
				updateBy: d[i].updateBy,
				updateTime: d[i].updateTime
			})
		}
	})
}

getList()

const handlerSearch = () => {
	data.value = []
	getList()
}

// 分享给朋友
  onShareAppMessage(() => ({
    title: '如初国风馆',
    path: '/pages/index/index', // 替换为你的页面路径
    imageUrl: 'https://only114514.oss-cn-hangzhou.aliyuncs.com/ruchu/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250606204232.jpg' // 可选：分享图片
  }))
  // 分享到朋友圈
  onShareTimeline(() => ({
  	  title: '如初国风馆',
  	  path: '/pages/index/index', // 替换为你的页面路径
  	  imageUrl: 'https://only114514.oss-cn-hangzhou.aliyuncs.com/ruchu/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250606204232.jpg' // 可选：分享图片
  }))

</script>

<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="back-icon cursor-pointer">
        <uni-icons type="left" size="24" color="#333" @click="goIndex"></uni-icons>
      </view>
      <view class="title">拍摄小贴士</view>
      <view class="right-icons">

      </view>
    </view>

    <!-- 搜索栏 -->
    <view class="search-bar">
      <view class="search-input">
        <uni-icons type="search" size="18" color="#999"></uni-icons>
        <input class="search-placeholder" placeholder="搜索标题"
			v-model="query.title"
			@input="handlerSearch"
		 />
      </view>
    </view>

    <!-- 内容区域 -->
    <scroll-view class="content-area" scroll-y>
		
      <!-- 拍照小贴士卡片 -->
      <view class="tip-card cursor-pointer" v-for="i in data" 
		@click="goTipsDe(i)"
	  >
        <view class="tip-image">
          <image
            :src="baseUrl + i.file[0].url"
            mode="aspectFill"
          ></image>
        </view>
        <view class="tip-content">
          <view class="tip-title">
            <uni-icons
              type="camera-filled"
              size="16"
              color="#6a5acd"
              class="icon-camera"
            ></uni-icons>
            <text class="title-text">{{i.title}}</text>
          </view>
          <view class="tip-desc">
            <uni-icons
              type="camera-filled"
              size="16"
              color="#6a5acd"
              class="icon-camera"
            ></uni-icons>
            <text class="desc-text"
              >{{i.content.substring(0,8) + "..."}}</text
            >
          </view>
          <view class="tip-date">{{i.updateTime}}</view>
        </view>
      </view>

    </scroll-view>
  </view>
</template>



<style>


.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-top: 90rpx;
  background-color: #f5f5f5;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 88rpx;
  padding: 0 20rpx;
  background-color: #ffffff;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}

.back-icon {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: 500;
  color: #333333;
}

.right-icons {
  display: flex;
  align-items: center;
}

.icon-more,
.icon-minus,
.icon-circle {
  margin-left: 20rpx;
}

.search-bar {
  padding: 20rpx 30rpx;
  background-color: #ffffff;
  flex-shrink: 0;
}

.search-input {
  display: flex;
  align-items: center;
  height: 70rpx;
  background-color: #f5f5f5;
  border-radius: 35rpx;
  padding: 0 30rpx;
}

.search-placeholder {
  margin-left: 16rpx;
  font-size: 14px;
  color: #999999;
}

.content-area {
  width: 92%;
  flex: 1;
  overflow: auto;
  padding: 20rpx 30rpx;
}

.tip-card {
  display: flex;
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.tip-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 8rpx;
  overflow: hidden;
  margin-right: 20rpx;
  flex-shrink: 0;
}

.tip-image image {
  width: 100%;
  height: 100%;
}

.tip-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.tip-title {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.title-text {
  font-size: 16px;
  font-weight: 500;
  color: #333333;
  margin-left: 8rpx;
}

.tip-desc {
  display: flex;
  margin-bottom: 20rpx;
}

.desc-text {
  font-size: 14px;
  color: #666666;
  line-height: 1.5;
  margin-left: 8rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.tip-date {
  font-size: 12px;
  color: #999999;
  text-align: right;
}

.icon-camera,
.icon-image,
.icon-sun,
.icon-star,
.icon-person {
  flex-shrink: 0;
}

.cursor-pointer {
  cursor: pointer;
}
</style>
